// 从 @logicflow/core 引入必要的组件和函数
import { RectNode, RectNodeModel, h } from '@logicflow/core'

// 自定义视图类，继承自 RectNode
class ServiceTaskView extends RectNode {
  // 获取标签形状的方法，用于在节点中添加一个自定义的 SVG 元素
  getLabelShape () {
    const { model } = this.props // 从 props 中获取 model 数据
    const { x, y, width, height } = model // 从 model 中解构出位置和尺寸信息
    const style = model.getNodeStyle() // 获取节点的样式
    // 使用 h 函数创建 SVG 标签
    return h(
      'svg',
      {
        x: x - width / 2 + 5, // 计算 SVG 的 x 坐标
        y: y - height / 2 + 5, // 计算 SVG 的 y 坐标
        width: 25,
        height: 25,
        viewBox: '0 0 1274 1024' // 设定 SVG 的视窗
      },
      [
        // 创建 path 元素，展示自定义图形
        h('path', {
          fill: style.stroke, // 设置填充色为节点的边框色
          d: 'M919.6 405.6l-57.2-8c-12.7-1.8-23-10.4-28-22.1-11.3-26.7-25.7-51.7-42.9-74.5-7.7-10.2-10-23.5-5.2-35.3l21.7-53.5c6.7-16.4 0.2-35.3-15.2-44.1L669.1 96.6c-15.4-8.9-34.9-5.1-45.8 8.9l-35.4 45.3c-7.9 10.2-20.7 14.9-33.5 13.3-14-1.8-28.3-2.8-42.8-2.8-14.5 0-28.8 1-42.8 2.8-12.8 1.6-25.6-3.1-33.5-13.3l-35.4-45.3c-10.9-14-30.4-17.8-45.8-8.9L230.4 168c-15.4 8.9-21.8 27.7-15.2 44.1l21.7 53.5c4.8 11.9 2.5 25.1-5.2 35.3-17.2 22.8-31.7 47.8-42.9 74.5-5 11.8-15.3 20.4-28 22.1l-57.2 8C86 408 72.9 423 72.9 440.8v142.9c0 17.7 13.1 32.7 30.6 35.2l57.2 8c12.7 1.8 23 10.4 28 22.1 11.3 26.7 25.7 51.7 42.9 74.5 7.7 10.2 10 23.5 5.2 35.3l-21.7 53.5c-6.7 16.4-0.2 35.3 15.2 44.1L354 927.8c15.4 8.9 34.9 5.1 45.8-8.9l35.4-45.3c7.9-10.2 20.7-14.9 33.5-13.3 14 1.8 28.3 2.8 42.8 2.8 14.5 0 28.8-1 42.8-2.8 12.8-1.6 25.6 3.1 33.5 13.3l35.4 45.3c10.9 14 30.4 17.8 45.8 8.9l123.7-71.4c15.4-8.9 21.8-27.7 15.2-44.1l-21.7-53.5c-4.8-11.8-2.5-25.1 5.2-35.3 17.2-22.8 31.7-47.8 42.9-74.5 5-11.8 15.3-20.4 28-22.1l57.2-8c17.6-2.5 30.6-17.5 30.6-35.2V440.8c0.2-17.8-12.9-32.8-30.5-35.2z m-408 245.5c-76.7 0-138.9-62.2-138.9-138.9s62.2-138.9 138.9-138.9 138.9 62.2 138.9 138.9-62.2 138.9-138.9 138.9z'
        })
      ]
    )
  }

  // 重写 getShape 方法，定义节点的整体形状
  getShape () {
    const { model } = this.props // 获取 model 数据
    const { x, y, width, height, radius } = model // 解构位置、尺寸和圆角信息
    const style = model.getNodeStyle() // 获取节点的样式
    
    // 使用 h 函数组合节点的矩形和标签
    return h('g', {}, [
      h('rect', {
        ...style,
        x: x - width / 2, // 设置矩形的 x 坐标
        y: y - height / 2, // 设置矩形的 y 坐标
        rx: radius, // 矩形的 x 方向圆角
        ry: radius, // 矩形的 y 方向圆角
        width,
        height
      }),
      this.getLabelShape() // 添加标签形状
    ])
  }
}

// 自定义模型类，继承自 RectNodeModel
class ServiceTaskModel extends RectNodeModel {
  // 设置节点属性的方法
  setAttributes () {
    const size = this.properties.scale || 1 // 从属性中获取缩放比例，默认为 1
    this.width = 100 * size // 计算节点宽度
    this.height = 60 * size // 计算节点高度
  }

  // 获取文本样式的方法
  getTextStyle () {
    const style = super.getTextStyle() // 调用基类方法获取默认文本样式
    style.fontSize = 12 // 设置字体大小
    const properties = this.properties // 获取节点的自定义属性
    style.color = properties.disabled ? 'red' : 'rgb(24, 125, 255)' // 根据 disabled 属性调整文本颜色
    return style
  }

  // 获取节点样式的方法
  getNodeStyle () {
    const style = super.getNodeStyle() // 调用基类方法获取默认节点样式
    const properties = this.properties // 获取节点的自定义属性
    // 根据 disabled 属性调整边框颜色
    if (properties.disabled) {
      style.stroke = 'red'
    } else {
      style.stroke = 'rgb(24, 125, 255)'
    }
    return style
  }

  // 其他样式和方法根据需要实现，例如锚点样式、锚点线条样式等
  getAnchorStyle (anchorInfo: any) {
    const style = super.getAnchorStyle(anchorInfo)
    style.stroke = 'rgb(24, 125, 255)'
    style.r = 3
    style.hover.r = 8
    style.hover.fill = 'rgb(24, 125, 255)'
    style.hover.stroke = 'rgb(24, 125, 255)'
    return style
  }

  getAnchorLineStyle (anchorInfo: any) {
    const style = super.getAnchorLineStyle(anchorInfo)
    style.stroke = 'rgb(24, 125, 255)'
    return style
  }

  getOutlineStyle () {
    const style = super.getOutlineStyle()
    style.stroke = 'red'
    if (style.hover) {
      style.hover.stroke = 'red'
    }
    return style
  }
}

// 导出配置，用于在 LogicFlow 中注册和使用自定义节点
export default {
  type: 'ServiceTask', // 节点类型的唯一标识
  view: ServiceTaskView, // 使用自定义视图类
  model: ServiceTaskModel // 使用自定义模型类
}
